<template>
	<view class="library">
		<block v-if="!boxHide" v-for="(item,index) in list">
			<view class="library_item" @tap="goInfo(item.id,item.title)">
				<view>{{item.title}}</view>
				<image src="/static/images/right.png" class="right"></image>
			</view>
		</block>
		
		<Loading ref="load"></Loading>
	</view>
</template>

<script>
	import Loading from "../../components/loading/loading.vue"
	export default{
		components:{
			Loading
		},
		data(){
			return{
				boxHide:true,
				loading:true,
				list:[]
			}
		},
		onShow() {
			if(this.$app.globalData.upData.library){
				this.getData(1)
			}
		},
		onReachBottom() {
			if(this.loading){
				this.getData(3)
			}
		},
		onUnload() {
			this.$app.globalData.upData.library = true
		},
		methods:{
			getData(type){
				this.$refs.load.initLoading({loadType:type}).then(res =>{
					this.boxHide = false;
					if(type == 1){this.list = [];this.page = 1;this.loading = true;this.$app.globalData.upData.library = false}
					this.$api.getLibraryList({page:this.page}).then(res => {
						this.$refs.load.getLoadingData({oldData:this.list,newData:res.data}).then(res => {
							this.list = res.list;
							this.loading = res.loading;
							this.page ++;
						});
					})
				})
			},
			goInfo(id,title){
				uni.navigateTo({
					url:"/pages/library/info/info?id=" + id + "&title=" + title
				})
			}
		}
	}
</script>

<style>
	.library{width: 100%;}
	.library_item{width: 690upx;line-height: 100upx;padding:0 30upx;font-size: 30upx;color: #333333;display: flex;flex-direction: row;align-items: center;justify-content: space-between;border-bottom: 2upx solid #EEEEEE;background: #FFFFFF;}
	.library_item:last-child{border-bottom: 0 solid #FFFFFF;}
</style>
